import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Card, Input, message, Divider} from 'antd'
import StudentList from '../common/student-list';
import TutorList from '../common/tutor-list';
import {
  getMyStudents,
  getProgramById,
  editStudentGroups,
  getGroups,
  follow,
  unFollow,
  removeStudentFromProgram, removeTutorFromProgram
} from '../../action/program'
import {convertContent} from '../../constant/lang-util'
import {FormattedMessage} from 'react-intl'

const Search = Input.Search;

class MembersManagement extends Component {

  state = {
    usernames: [],
    programId: -1,
    programName: ""
  }

  handleSearch(programId) {
    const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
    if ((isNaN(programId) || !reg.test(programId))) {
      message.warning(convertContent('请输入数字'))
    } else {
      this.setState({programId})
      this.props.getProgramById(programId)
      this.props.getGroups()
    }
  }

  handleEditStudentGroups(groups, studentId) {
    const {programId} = this.state
    this.props.editStudentGroups(programId, studentId, groups)
  }

  removeFromProgram(id,type) {
    const {programId} = this.state
    if ('student' === type) {
      this.props.removeStudentFromProgram(id, programId)
    }else{
      this.props.removeTutorFromProgram(id, programId)
    }
  }

  render() {
    const {students, tutors, program, tutorStudents, groups} = this.props
    return (
      <Card title={<FormattedMessage id='训练营人员全览'/>}>
        <div>
          <FormattedMessage id='训练营查询'/><Search
          placeholder={convertContent('请输入训练营ID')}
          onSearch={this.handleSearch.bind(this)}
          style={{width: 200}}
        />

        </div>
        <Divider dashed/>
        {program.title ?
          <p><font color='red'>{program.title}</font> <FormattedMessage id='训练营下的所有学员'/></p>
          : ''}
        <StudentList
          students={students}
          groups={groups}
          removeFromProgram={this.removeFromProgram.bind(this)}
          refreshGroups={() => this.props.getGroups()}
          editStudentGroups={this.handleEditStudentGroups.bind(this)}
        />

        <Divider dashed/>
        {program.title ?
          <p><font color='red'>{program.title}</font><FormattedMessage id='训练营下的所有助教'/></p>
          : ''}

        <TutorList
          tutors={tutors}
          students={students}
          programId={program.id}
          follow={this.props.follow}
          unFollow={this.props.unFollow}
          tutorStudents={tutorStudents}
          removeFromProgram={this.removeFromProgram.bind(this)}
          getMyStudents={(tutorId) => this.props.getMyStudents(tutorId, program.id)}/>
      </Card>
    )
  }
}

const mapStateToProps = ({students, tutors, program, tutorStudents, groups}) => ({
  students,
  tutors,
  program,
  tutorStudents,
  groups
})

const mapDispatchToProps = dispatch => ({
  getProgramById: (programId) => dispatch(getProgramById(programId)),
  getMyStudents: (tutorId, programId) => dispatch(getMyStudents(tutorId, programId)),
  getGroups: () => dispatch(getGroups()),
  editStudentGroups: (programId, studentId, groups) => dispatch(editStudentGroups(programId, studentId, groups)),
  follow: (programId, tutorId, studentIds) => dispatch(follow(programId, tutorId, studentIds)),
  unFollow: (programId, tutorId, studentIds) => dispatch(unFollow(programId, tutorId, studentIds)),
  removeStudentFromProgram: (id, programId) => dispatch(removeStudentFromProgram(id,programId)),
  removeTutorFromProgram: (id, programId) => dispatch(removeTutorFromProgram(id,programId))
})

export default connect(mapStateToProps, mapDispatchToProps)(MembersManagement)